import Layout from 'layout'
import React, {Component} from 'react'
import Router from 'next/router'
import Link from 'next/link'
import classNames from 'classnames'
import Header from 'components/Header'
import {Tag} from 'antd'
import request from 'utils/request'
import {observable, computed} from 'mobx'
import {observer, Provider, inject} from 'mobx-react'
import {tagStyle} from 'styles/tag'

class App extends Component {

  static async getInitialProps(){
    const tags = (await request('get', `tag`)).data
    return {tags}
  }

  constructor(props){
    super(props)
  }

  componentDidMount() {
    console.log(this.props.tags)
  }

  render() {
    return (
      <Layout>
        <Header />
        <div className="content">
          {this.props.tags.map((t, i) => 
            <Link key={t.name}
              href={`/?tag=${t._id}`}
              as={`/tag/${t.name}`}
              >
              <a><Tag>{t.name}</Tag></a>                          
            </Link>
          )}
        </div>
        <style jsx>{tagStyle}</style>
      </Layout>
    )
  }
}

export default App